<template>
    <div>
        <h3>详情页</h3>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">房型名称</td>
                    <td>{{ querinfo.HouseTypeName }}</td>
                </tr>

                <tr>
                    <td align="right">房型图片</td>
                    <td><img :src="querinfo.Photo" width="150" height="100"></td>
                </tr>

                <tr>
                    <td align="right">房型面积</td>
                    <td>{{ querinfo.Area }}㎡</td>
                </tr>

                <tr>
                    <td align="right">是否有窗</td>
                    <td>{{ querinfo.IsWindow =1?"是":"否" }}</td>
                </tr>

                <tr>
                    <td align="right">入住人数</td>
                    <td>{{ querinfo.Count }}人</td>
                </tr>

                <tr>
                    <td align="right">价格</td>
                    <td>￥{{ querinfo.Price }}</td>
                </tr>

                <tr>
                    <td align="right">状态</td>
                    <td>{{ querinfo.State=1?"上架":"下架" }}</td>
                </tr>
            </tbody>

        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, useSlots } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import moment from 'moment';
import axios from 'axios';
const route = useRoute();
const router = useRouter();

let querinfo = reactive({
    "Id": route.query.id,
    "HouseTypeName": "",
    "Photo": "",
    "Area": "",
    "IsWindow": "",
    "Count": "",
    "Price": "",
    "State": "",
    "CreateTime": "",
})


onMounted(() => {
    getDate();
})

const getDate = () => {
    axios({
        method: "get",
        url: "/api/House/GetHouseTypeItem",
        params: {
            id: route.query.id
        }
    })
        .then(res => {
            console.log(res);
            Object.assign(querinfo, res.data);
        })
}



</script>








<style scoped></style>